<!--这个组件尝试失败了-->
<template>
	<view class="base-dropdown-menu">

		<view class="base-dropdown-menu__bar">
			<view class="van-dropdown-item" v-for="(item,index) in list" :key="index"
			@click="showList(index)">
				<view class="">
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>

		<view  v-for="(item,index) in list" :key="index" >
			<view class="van-dropdown-item__down" v-if="showIndex==index">

				<u-popup :show="show && showIndex==index" mode="top"
				  :overlayStyle="{
					position: 'absolute',
				  }"
				  :animationStyle="{
					position: 'absolute',
				  }"
				  @close="overlayClick" >
					<view>
						<text>人生若只如初见，何事秋风悲画扇</text>
					</view>
				</u-popup>
			</view>

		</view>
		dddddddddd
	</view>

</template>

<script>
	export default {
		name:"base-dropdown-menu ",
		model: {
		  prop: 'value', // 默认是value
		  event: 'input', // 默认是input
		},
		props: {
			value: {
				type: String,
				// observer: 'rerender',
			},
			title: {
				type: String,
				// observer: 'rerender',
			},
			options: {
				type: Array,
				value: [],
				// observer: 'rerender',
			},
		},
		data() {
			return {
				list: [{
					title: '天气',
					arr: [{
						label: '雪月夜',
						id: 2021
					}, {
						label: '冷夜雨',
						id: 804
					}, {
						label: '冷雨',
						id: 8041
					}, {
						label: '冷夜',
						id: 8042
					}]
				}, {
					title: '地点',
					arr: [{
						label: '雪',
						id: 2021
					}, {
						label: '冷',
						id: 804
					}, {
						label: '雨',
						id: 8041
					}, {
						label: '夜',
						id: 8042
					}]
				}, {
					title: '地点2',
					arr: [{
						label: '雪2',
						id: 2021
					}, {
						label: '冷',
						id: 804
					}, {
						label: '雨',
						id: 8041
					}, {
						label: '夜',
						id: 8042
					}]
				}],
				show:false,
				showIndex: -1,
			};
		},
		created() {
			this.children = []
			console.log('this.children ',this.children )
		},
		methods: {
		    showList(index) {
		    	if(index==this.showIndex){
		    		this.show=false
		    		this.showIndex=-1
		    	}else{
		    		this.show=false
		    		setTimeout(()=>{
		    			this.show=true
		    		},250)
		    		this.showIndex = index
		    	}
		    },
			// 点击遮罩
			overlayClick() {
				console.log('点击遮罩')
				this.show=false
				this.showIndex=-1
			},
		},
	}
</script>

<style>
.base-dropdown-menu{
	position: relative;
	user-select: none;
}
.base-dropdown-menu__bar{
	position: relative;
	display: flex;
	height: 48px;
	background-color: #fff;
	box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
}
.van-dropdown-item{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
	cursor: pointer;

}
.van-dropdown-item__down{
	display: block;
	position: fixed;
	width: 100%;
	bottom: 0;
	top: 304px;
	/* background-color: rgba(0, 0, 0, 0.7); */
	transition: all 1s;
/* 	animation: mark .2s;
	animation-fill-mode: forwards; */
}
@keyframes mark {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
</style>
